<template>
	<view class="message_box">
		<view class="tab_box dpflxr">
			<view v-for="(item,index) in tabList" class="title pos_rel" :class="{actived:type==index,noted:item.noted}"
				@click="optionTap(index)">
				<view class="pos_rel">
					<text>{{ item.name }}</text>
					<view class="dot pos_abs"></view>
				</view>
				<view class="icon pos_abs"></view>
			</view>
		</view>
		<navigator :url="'../message_detail/message_detail?id=' + item.id + '&title=' + item.title" class="mbItem dpflxr w" v-for="(item, index) in list">
			<view class="icon">
				<image :src="item.icon"></image>
			</view>
			<view class="words">
				<view class="dpflxrjb">
					<text class="title">{{ item.title }}</text>
					<text class="time">{{ item.createdAt }}</text>
				</view>
				<view class="dpflxrjbfs">
					<text class="multiColumn wContent">{{ item.content }}</text>
					<text class="dot" v-if="!item.isRead"></text>
				</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	import request from "@/api/index.js";

	export default {
		data() {
			return {
				title: 'Hello',
				type: 0,
				tabList: [{
					name: '全部',
					type: '',
					noted: false
				}, {
					name: '系统消息',
					type: 'system',
					noted: false
				}, {
					name: '发货提醒',
					type: 'delivery_notice',
					noted: false
				}, {
					name: '补货提醒',
					type: 'replenishment_notice',
					noted: false
				}, {
					name: '公告',
					type: 'announce',
					noted: false
				}],
				page: 1,
				list: []
			}
		},
		onLoad() {
			this.getMessageList();
		},

		onReachBottom() {
			var tabList = this.tabList;
			var list = this.list;
			var page = this.page;
			var index = this.type;
			var incPage = ++page;
			var data = {
				current: incPage
			}

			if (index > 0) {
				var type = tabList[index].type
				data.type = type;
			}

			request.http('/shop/store-api/' + uni.getStorageSync('shop_id') + '/frontMessage/page', 'POST', data, '数据加载中...').then(res => {
				var data = res.data;
				if (data.code == 0) {
					var list_data = data.data.records;

					if (list_data.length > 0) {
						var icon;
						var title;
						list_data.forEach(function(val) {
							if (val.type == 'system') {
								icon = '../../static/images/icon_msg_xttz.png'
								title = '系统消息';
							} else if (val.type == 'delivery_notice') {
								//（图标需要改）
								icon = '../../static/images/icon_msg_xdtx.png'
								title = '发货提醒';
							} else if (val.type == 'replenishment_notice') {
								icon = '../../static/images/icon_msg_bhtx.png'
								title = '补货提醒';
							} else if (val.type == 'announce') {
								//（图标需要改）
								icon = '../../static/images/icon_msg_xttz.png'
								title = '公告';
							}
							val.icon = icon;
							val.title = title;

							list.push(val)
						})

						this.list = list;
						this.page = incPage;
					} else {
						uni.showToast({
							title: '暂无更多数据',
							icon: 'none'
						})
					}

				}
			})
		},

		methods: {
			optionTap(index) {
				this.type = index;

				this.getMessageList(index);
			},

			getMessageList: function(index = 0) {
				var data = {
					current: 1
				}
				if (index > 0) {
					var type = this.tabList[index].type
					data.type = type;
				}

				request.http('/shop/store-api/' + uni.getStorageSync('shop_id') + '/frontMessage/page', 'POST', data,
					'数据加载中...').then(res => {
					var data = res.data;
					if (data.code == 0) {
						var list = data.data.records;

						var icon;
						var title;
						list.forEach(function(val) {
							if (val.type == 'system') {
								icon = '../../static/images/icon_msg_xttz.png'
								title = '系统消息';
							} else if (val.type == 'delivery_notice') {
								icon = '../../static/images/icon_msg_fhtix.png'
								title = '发货提醒';
							} else if (val.type == 'replenishment_notice') {
								icon = '../../static/images/icon_msg_bhtx.png'
								title = '补货提醒';
							} else if (val.type == 'announce') {
								icon = '../../static/images/icon_msg_ggxx.png'
								title = '公告';
							}
							val.icon = icon;
							val.title = title;
						})

						this.list = list;
					}
				})
			}
		}
	}
</script>

<style src="../../static/css/app.css"></style>
<style>
	page {
		background-color: #fff;
	}

	.tab_box .title {
		width: calc(100% / 5);
		font-size: 24rpx;
	}

	.tab_box .title.noted .dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #FF1313;
		top: 29rpx;
		right: 17rpx;
	}

	.mbItem {
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		border-bottom: 1rpx #eee solid;
	}

	.mbItem .icon {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}

	.mbItem .words {
		width: calc(100% - 100rpx);
		font-size: 24rpx;
		color: #999999;
		line-height: 32rpx;
	}

	.mbItem .words .title {
		color: #333333;
		font-size: 28rpx;
		line-height: 40rpx;
		margin-bottom: 10rpx;
	}

	.mbItem .words .time {
		margin-bottom: 10rpx;
	}

	.mbItem .words .dot {
		width: 16rpx;
		height: 16rpx;
		background: #FF1313;
		border-radius: 50%;
		margin-top: 10rpx;
	}
	.wContent{
		width: calc(100% - 20rpx);
	}
</style>